import React from 'react'
import "./theme.less"
import {Divider, Radio} from "antd";
import bg01 from "../../../../images/login/bg01.jpg"
import bg02 from "../../../../images/login/bg02.jpg"
import bg03 from "../../../../images/login/bg03.jpg"
import bg04 from "../../../../images/login/bg04.jpg"
import bg05 from "../../../../images/login/bg05.jpg"
import bg07 from "../../../../images/login/bg07.jpg"
import useTheme from "../../../../shared/libs/antd-theme"

const images = [
	{cls: 'bg01', img: bg01, color: '#171429'},
	{cls: 'bg02', img: bg02, color: '#001542'},
	{cls: 'bg03', img: bg03, color: '#00001a'},
	{cls: 'bg04', img: bg04, color: '#002b4b'},
	{cls: 'bg05', img: bg05, color: '#231052'},
	{cls: 'bg07', img: bg07, color: '#1A2D29'},
]

const Theme = ({onChange}) => {

	const c1 = ['#ff4d4f',
		'#cd8834',
		'#dba934',
		'#eb2f96']


	const c2 = ['#008e0a',
		'#134eff',
		'#1890ff',
		'#722ed1']

	const {setPrimaryColor, setTheme, setBackground, themeName} = useTheme()
	const json = localStorage.getItem('meinian-theme')
	const {theme} = json && JSON.parse(json) || {}


	return (
		<div className={'body-bg theme-chooser-box'}>
			<h3>颜色</h3>
			<div>
				<div className={'color-chooser'}>
					{c1.map(c => <Item color={c} onClick={() => setPrimaryColor(c)}/>)}
				</div>
				<div className={'color-chooser'}>
					{c2.map(c => <Item color={c} onClick={() => setPrimaryColor(c)}/>)}
				</div>
			</div>

			<Divider/>
			<h3>主题</h3>
			<div className={'theme-chooser'}>
				<Radio.Group onChange={e => setTheme(e.target.value)} defaultValue={theme} buttonStyle="solid">
					<Radio.Button value="default">明亮模式</Radio.Button>
					<Radio.Button value="dark">暗色模式</Radio.Button>
				</Radio.Group>
			</div>

			<Divider/>
			<h3>背景</h3>
			<div className={'bg-image-chooser'}>
				{
					images.map(i => <div><img alt={''} onClick={() => setBackground(i)} src={i.img}/></div>)
				}
			</div>

		</div>

	)
}

const Item = ({color, onClick}) => {

	return (
		<div className={'theme-item'}
		     onClick={(color) => onClick(color)}
		     style={{'backgroundColor': color}}>
		</div>
	)
}

export default Theme